import React, { useState } from 'react';
import { Table, Button, Tag, Modal, Form, Input, Checkbox, Space } from 'antd';
import { EditOutlined } from '@ant-design/icons';

const { Column } = Table;
const { TextArea } = Input;

const RoleManagement = () => {
  const [roles] = useState([
    { id: 1, name: '管理员', permissions: ['用户管理', '角色权限', '操作日志'], description: '系统管理员，拥有所有权限' },
    { id: 2, name: '编辑', permissions: ['用户管理'], description: '内容编辑人员，可管理用户信息' },
    { id: 3, name: '查看员', permissions: ['操作日志'], description: '仅可查看操作日志' },
  ]);

  const [selectedRole, setSelectedRole] = useState(null);
  const [isModalVisible, setIsModalVisible] = useState(false);

  const handleEdit = (role) => {
    setSelectedRole({...role});
    setIsModalVisible(true);
  };

  const handleSave = () => {
    // TODO: 实现保存逻辑
    setIsModalVisible(false);
    setSelectedRole(null);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setSelectedRole(null);
  };

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '16px' }}>
        <h2>角色权限管理</h2>
      </div>
      <Table 
        dataSource={roles} 
        rowKey="id"
        pagination={{
          total: roles.length,
          showTotal: (total) => `共 ${total} 条记录`,
          showSizeChanger: true,
          showQuickJumper: true
        }}
      >
        <Column
          title="角色名称"
          dataIndex="name"
          key="name"
        />
        <Column
          title="权限列表"
          dataIndex="permissions"
          key="permissions"
          render={(permissions) => (
            <Space>
              {permissions.map((perm, index) => (
                <Tag key={index} color="blue">{perm}</Tag>
              ))}
            </Space>
          )}
        />
        <Column
          title="描述"
          dataIndex="description"
          key="description"
        />
        <Column
          title="操作"
          key="action"
          render={(_, record) => (
            <Button 
              type="primary" 
              icon={<EditOutlined />} 
              onClick={() => handleEdit(record)}
              size="small"
            >
              编辑
            </Button>
          )}
        />
      </Table>

      {selectedRole && (
        <Modal
          title={`编辑角色: ${selectedRole.name}`}
          open={isModalVisible}
          onOk={handleSave}
          onCancel={handleCancel}
          okText="保存"
          cancelText="取消"
        >
          <Form layout="vertical">
            <Form.Item label="角色名称">
              <Input 
                value={selectedRole.name}
                onChange={(e) => setSelectedRole({...selectedRole, name: e.target.value})}
              />
            </Form.Item>
            <Form.Item label="权限">
              <Checkbox.Group 
                value={selectedRole.permissions}
                onChange={(checkedValues) => setSelectedRole({...selectedRole, permissions: checkedValues})}
                style={{ display: 'flex', flexDirection: 'column' }}
              >
                <Checkbox value="用户管理">用户管理</Checkbox>
                <Checkbox value="角色权限">角色权限</Checkbox>
                <Checkbox value="操作日志">操作日志</Checkbox>
              </Checkbox.Group>
            </Form.Item>
            <Form.Item label="描述">
              <TextArea 
                value={selectedRole.description}
                onChange={(e) => setSelectedRole({...selectedRole, description: e.target.value})}
                rows={3}
              />
            </Form.Item>
          </Form>
        </Modal>
      )}
    </div>
  );
};

export default RoleManagement;